import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { getUserInfo } from '@/api/user'
import { addDynamicRoutes } from '@/utils/permission'
import { defineAsyncComponent } from 'vue'

const TestVModel = defineAsyncComponent(() => import('../views/TestVModel/index.vue'))
const TestScopeSlot = defineAsyncComponent(() => import('../views/TestScopeSlot/index.vue'))

const router = createRouter({
  // 路由模式，这里面使用的是history模式
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/login',
      name: 'login', // 命名路由，跳转的时候，除了可以根据path跳转，还可以命名路由跳转
      meta: {
        isStatic: true
      },
      component: () => import('../views/Login/index.vue') // 路由懒加载
    },
    {
      path: '/',
      name: 'layout', // 命名路由，后面进行动态路由设置会用到
      meta: {
        isStatic: true
      },
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/Layout/index.vue')
      // children: [
      //   {
      //     path: 'user/list',
      //     component: () => import('../views/User/index.vue')
      //   },
      //   {
      //     path: 'swiper/list',
      //     component: () => import('../views/Swiper/index.vue')
      //   },
      //   {
      //     path: 'goods/list',
      //     component: () => import('../views/Goods/index.vue')
      //   },
      //   {
      //     path: 'visible/echarts',
      //     component: () => import('../views/Visible/echarts.vue')
      //   },
      //   {
      //     path: 'visible/echarts-other',
      //     component: () => import('../views/Visible/echarts-other.vue')
      //   },
      //   {
      //     path: 'editor/submit',
      //     component: () => import('../views/Editor/index.vue')
      //   },
      //   {
      //     path: 'map/baidu',
      //     component: () => import('../views/Map/baidu.vue')
      //   },
      //   {
      //     path: 'map/baidu-vue3',
      //     component: () => import('../views/Map/baidu-vue3.vue')
      //   }
      // ]
    },
    {
      path: '/testVModel',
      meta: {
        isStatic: true
      },
      component: () => import('../views/TestVModel/index.vue')
      // component: TestVModel
    },
    {
      path: '/testScopeSlot',
      meta: {
        isStatic: true
      },
      component: () => import('../views/TestScopeSlot/index.vue')
      // component: TestScopeSlot
    },
    {
      path: '/testtransition',
      meta: {
        isStatic: true
      },
      component: () => import('../views/TestTransition/index.vue')
      // component: TestScopeSlot
    },
    {
      path: '/other',
      meta: {
        isStatic: true
      },
      component: () => import('../views/Other/index.vue')
    },
    {
      path: '/:pathMatch(.*)*',
      meta: {
        isStatic: true
      },
      component: () => import('../views/NotFount/index.vue')
    },
    {
      path: '/testAttributes',
      component: () => import('../views/TestAttributes/parent.vue')
    }
  ]
})

// 全局前置守卫
export const operator = {
  isInit: true
}

const whiteList = ['/login']
router.beforeEach(async to => {
  const store = useUserStore()
  // path  /login
  // fullPath /login?name=zhangsan
  if (whiteList.includes(to.path)) {
    // 放行
    return true
  } else {
    // 需要进行权限判断
    if (store.userInfo?.token) {
      // 第一次进入到导航守卫的时候，去加载一次权限的数据，后续就无需重复加载了
      if (operator.isInit) {
        // 获取用户信息（包含的有用户的权限）
        const res = await getUserInfo()

        // 把用户信息保存到仓库中
        store.setUserInfo({ token: store.userInfo.token, ...res.data.data })

        // 根据权限列表，添加动态路由
        addDynamicRoutes(res.data.data.menus)

        // vue3要调用router replace方法才能在刷新浏览器的时候起作用，否则刷新访问是404
        // vue2是要调用 next 方法，解决上述的bug
        router.replace({ path: to.path })

        operator.isInit = false
      }

      return true
    } else {
      return {
        // 命名路由，通过路由进行跳转
        name: 'login',
        query: {
          redirect: to.fullPath
        }
      }
    }
  }
})

export default router
